<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="resetFunc">
        <JeepayDateCascadeSelection 
          :date="vdata.searchData.queryDateRange" 
          :cycleType="vdata.cycleType" 
          @changeDate="changeDateHandle" 
          @changeDateType="changeDateTypeHandle" 
        />
        <JeepaySearchInfoInput
          v-if="$access('ENT_STATISTIC_MCH')"
          v-model:value="vdata.searchData.mchNo"
          placeholder="商户号"
          :textUpStyle="true"
          :mchNoAndName="true"
          showType="MCH"
        />
        <jeepay-text-up v-model:value="vdata.searchData['agentNo']" :placeholder="'代理商号'" />
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="vdata.searchData"
        row-key="groupDate"
        :statisticsIsShow="true"
        :tableExportFunc="tableExportFunc"
        @btnLoadClose="btnLoading=false"
      >
        <template #headerCell="{ column }">
          <span v-if="column.tooltipTitle">
            {{ column.title }}
            <a-tooltip :title="column.tooltipTitle"><info-circle-outlined /></a-tooltip>
          </span>
        </template>
        <template #topBtnSlot>
          <a-button type="primary" @click="tableExportFunc">
            <plus-outlined />导出表格
          </a-button>
        </template>
        <template #statistics>
          <div class="statistics-list">
            <div v-for="(item, index) in count" :key="index" class="item">
              <div v-if="item.type == 'line'" class="line" />
              <div class="title">{{ item.title }}</div>
              <div v-if="item.title" class="amount" :style="{color: item.textColor}">
                <span class="amount-num">{{ item.content }}</span>
              </div>
            </div>
          </div>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'allAmount'">
            <b style="color: #15B86C;">￥{{ record.allAmount / 100 }}</b>
          </template>
          <template v-if="column.key === 'payAmount'">
            <b style="color: #15B86C;">￥{{ record.payAmount / 100 }}</b>
          </template>
          <template v-if="column.key === 'fee'">
            <b style="color: #FF6848;">￥{{ record.fee / 100 }}</b>
          </template>
          <template v-if="column.key === 'refundFee'">
            <b style="color: #15B86C;">￥{{ record.refundFee / 100 }}</b>
          </template>
          <template v-if="column.key === 'refundAmount'">
            <b style="color: #FF6848;">￥{{ record.refundAmount / 100 }}</b>
          </template>
          <template v-if="column.key === 'refundCount'">
            <b style="color: #FF6848;">{{ record.refundCount }}</b>
          </template>
          <template v-if="column.key === 'payCount'">
            <b style="color: #15B86C;">{{ record.payCount }}/{{ record.allCount }}</b>
          </template>
          <template v-if="column.key === 'round'">
            <b style="color: #FF8800;">{{ record.round }}%</b>
          </template>
          <template v-if="column.key === 'operation'">
            <JeepayTableColumns>
              <a-button v-if="$access('ENT_STATISTIC_MCH')" type="link" @click="toPage('/statistic/mch', record.groupDate)">商户详情</a-button>
              <a-button type="link" @click="toPage('/statistic/agent', record.groupDate)">代理商详情</a-button>
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>
  </page-header-wrapper>
</template>
<script setup lang="ts">

import { API_URL_STATISTIC, req, $exportExcel, exportExcelUrl } from '@/api/manage'
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import JeepayDateCascadeSelection from './JeepayDateCascadeSelection.vue'
import router from '@/router'
import dateUtil from '@/utils/dateUtil.js'
import { message } from 'ant-design-vue'
import fileDownload from 'js-file-download'
const { $infoBox, $access, $hasAgentEnt } = getCurrentInstance()!.appContext.config.globalProperties

const infoDetail = ref()
const infoTable = ref()
let tableColumns = reactive([
  { key: 'groupDate', title: '日期', dataIndex: 'groupDate', agentEntCol: true,},
  { key: 'allAmount', title: '成交金额', tooltipTitle: '支付成功的订单金额，包含部分退款及全额退款的订单', dataIndex: 'allAmount'},
  { key: 'payAmount', title: '实收金额', tooltipTitle: '扣除手续费后的实际到账金额', dataIndex: 'payAmount'},
  { key: 'fee', title: '手续费', tooltipTitle: '成交订单产生的手续费金额', dataIndex: 'fee'},
  { key: 'refundAmount', title: '退款金额', dataIndex: 'refundAmount'},
  { key: 'refundFee', title: '手续费回退', tooltipTitle: '退款订单产生的手续费退费金额', dataIndex: 'refundFee'},
  { key: 'refundCount', title: '退款笔数', tooltipTitle: '实际退款订单笔数，若一笔已成交订单退款多次，则计多次', dataIndex: 'refundCount'},
  { key: 'payCount', title: '成交/总笔数', dataIndex: 'payCount', },
  { key: 'round', title: '成功率', tooltipTitle: '成交笔数与总订单笔数除得的百分比', dataIndex: 'round'},
  { key: 'operation', title: '操作', fixed: 'right', align: 'center'}
])

  let btnLoading = ref(false)
  let count:any = ref([]) // 数据统计数组

  const vdata : any = reactive({
    searchData: { method : 'transaction', queryDateType: 'day' }
  })
  // 请求table接口数据
  function reqTableDataFunc(params: any) {
    params.method = 'transaction'
    reqTableCountFunc(params)
    return req.list(API_URL_STATISTIC, params)
  }
  function searchFunc () { // 点击【查询】按钮点击事件
    infoTable.value.refTable(true)
  }

  // 请求table接口数据
  function reqTableCountFunc(params: any) {
    req.list(API_URL_STATISTIC + '/total', params).then(res => {
    count.value = [
        {title: '总成交金额', symbol: 'add', textColor: '#1A66FF', content: ((res.allAmount) / 100).toFixed(2)},
        {type: 'line'},
        {title: '总成交笔数', content: (res.payCount)},
        {type: 'line'},
        {title: '总退款金额', symbol: 'sub', content: ((res.refundAmount) / 100).toFixed(2)},
        {type: 'line'},
        {title: '总退款笔数', content: (res.refundCount)},
        {type: 'line'},
        {title: '支付成功率', content: (res.round) + '%'},
      ]
    })
  }

  function resetFunc(){ 
    vdata.searchData = {} 
    vdata.cycleType = 'date'
  }

  function tableExportFunc(){
    return $exportExcel(exportExcelUrl.statistic, Object.assign({}, vdata.searchData, {})).then(res => {
        fileDownload(res.data, '交易报表.xlsx')
    }).catch ((error) =>{console.log(error)} )
  }
  
  function toPage(path, groupDate) {
    let queryString = dateUtil.getMonthRangeQueryString(groupDate)
    if (vdata.searchData.queryDateType === 'day') {
      console.log('day')
      queryString = dateUtil.getDayRangeQueryString(groupDate)
    } else if(vdata.searchData.queryDateType === 'month') {
      queryString = dateUtil.getMonthRangeQueryString(groupDate)
    } else {
      queryString = dateUtil.getYearRangeQueryString(groupDate)
    }
    router.push({
      path: path,
      query: { queryDate: queryString }
    })
  }
  function dateDiff(startDate, endDate) {
      let flag = [1, 3, 5, 7, 8, 10, 12, 4, 6, 9, 11, 2]
      let start = new Date(startDate)
      let end = new Date(endDate)
      let year = end.getFullYear() - start.getFullYear()
      let month = end.getMonth() - start.getMonth()
      let day = end.getDate() - start.getDate()

      if (month < 0) {
        year--
        month = end.getMonth() + (12 - start.getMonth())
      }

      if (day < 0) {
        month--
        let index = flag.findIndex((temp) => { return temp === start.getMonth() + 1 })
        let monthLength = 0
        if (index <= 6) {
          monthLength = 31
        } else if (index > 6 && index <= 10) {
          monthLength = 30
        } else {
          monthLength = 28
        }
        day = end.getDate() + (monthLength - start.getDate())
      }
      let result = { years: year, months: month, days: day }
      return result
  }
  // 时间选择
  function changeDateHandle(e) {
    vdata.dateSpan = dateDiff(e.startDate, e.endDate)
    vdata.dateObject = { startDate: e.startDate, endDate: e.endDate }

    if(vdata.searchData['queryDateType'] === 'day') {
      if(vdata.dateSpan.days > 30 || vdata.dateSpan.months > 0) {
        message.error('相隔天数最多为30天！')
      }
    } else if(vdata.searchData['queryDateType'] === 'month') {
      if(vdata.dateSpan.months > 12 || vdata.dateSpan.years > 0) {
        message.error('相隔月数最多为12个月！')
      }
    }
    vdata.searchData['queryDateRange'] = e.timeParams
  }
  // 周期选择
  function changeDateTypeHandle(e) {
    if(e === 'date') {
      vdata.searchData['queryDateType'] = 'day'
    } else {
      vdata.searchData['queryDateType'] = e
    }
    vdata['cycleType'] = e
  }
</script>
